<template>
  <view class="container">
    <!-- 视频播放器 -->
    <view class="video-player-container">
      <video
        id="main-video"
        class="main-video"
        :src="mainVideo.videoUrl"
        :poster="mainVideo.image"
        show-play-btn="true"
        controls
        :loop="false"
        :muted="false"
        :autoplay="false"
        object-fit="cover"
        @ended="onVideoEnded"
        @play="onVideoPlay"
        @pause="onVideoPause"
        webkit-playsinline
        playsinline
      ></video>

      <!-- 视频标题 -->
      <view class="video-title" v-if="!isMainVideoPlaying">
        {{ mainVideo.title }}
      </view>
    </view>

    <!-- 服务分类 -->
    <view class="service-category">
      <view
        class="service-item"
        v-for="(item, index) in serviceList"
        :key="index"
        @touchstart="onServiceTouchStart(index)"
        @touchend="onServiceTouchEnd(index)"
        @touchcancel="onServiceTouchEnd(index)"
        :class="{ 'service-item-active': activeTouchIndex === index }"
      >
        <view class="service-icon" :style="{ backgroundColor: item.bgColor }">
          <text class="iconfont" :class="item.icon"></text>
        </view>
        <text class="service-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 广告banner -->
    <view class="ad-banner">
      <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" circular @change="onBannerChange">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <view class="banner-item">
            <image class="banner-image" :src="item.image" mode="aspectFill"></image>
            <view class="banner-tag">{{ item.tag }}</view>
            <view class="banner-title-overlay">
              <text class="banner-title">{{ item.title }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view class="banner-indicators">
        <view v-for="(item, index) in bannerList" :key="index" class="indicator" :class="{ 'indicator-active': currentBannerIndex === index }"></view>
      </view>
    </view>

    <!-- 热门项目 -->
    <view class="section hot-projects">
      <view class="section-header">
        <text class="section-title">热门项目</text>
        <view class="more">查看全部 ></view>
      </view>
      <view class="project-list">
        <view
          class="project-item"
          v-for="(item, index) in projectList"
          :key="index"
          @tap="onProjectTap(index)"
          :class="{ 'project-item-active': activeProjectIndex === index }"
        >
          <image class="project-img" :src="item.image" mode="aspectFill"></image>
          <view class="project-status" v-if="item.status">{{ item.status }}</view>
          <view class="project-info">
            <text class="project-title">{{ item.title }}</text>
            <text class="project-desc">{{ item.description }}</text>
            <view class="project-meta">
              <view class="project-date">
                <text class="iconfont">&#xe657; {{ item.date }}</text>
              </view>
              <view class="project-stats">
                <text class="project-views iconfont">&#xe622; {{ item.views }}</text>
                <text class="project-comments iconfont">&#xe600; {{ item.comments }}</text>
              </view>
              <view class="project-price">{{ item.price }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isMainVideoPlaying: false,
      activeTouchIndex: -1, // 记录当前按下的服务项索引
      activeProjectIndex: -1, // 记录当前按下的项目索引
      // 移除无用的滚动相关变量
      currentBannerIndex: 0,
      // 移除触摸坐标记录
      mainVideo: {
        image: 'https://www.lzlair.com/uploads/image/20241128/733f12e9e76dc281d80fd24c4219f058.jpg',
        videoUrl: 'https://feiwow.com:62/?explorer/share/file&hash=e6b3C2EN5nwV9qrFStgq5ZaouMfSiu-sxYFldemkABRBbkmzURtVyHR_s-veqyCk9kuI',
        title: 'ZG-T6倾转旋翼构型电动垂直起降'
      },
      serviceList: [
        {
          name: '项目发布',
          icon: 'icon-fabu',
          bgColor: '#f1f7fe'
        },
        {
          name: '项目投标',
          icon: 'icon-ic_zhaotoubiaoziliaotibao',
          bgColor: '#f1f7fe'
        },
        {
          name: '人才招募',
          icon: 'icon-tuandui',
          bgColor: '#f1f7fe'
        },
        {
          name: '平台入驻',
          icon: 'icon-ruzhu',
          bgColor: '#f1f7fe'
        }
      ],
      projectList: [
        {
          title: '城市核心区智能无人机起降台建设项目',
          image: 'https://feiwow.com:62/?explorer/share/file&hash=2f1fGFV-cLbqvITgKiorCGKSF0hLSYUhM3C3AVtdyCwJhudMELs9oAHEJvNPsSCh55ty',
          status: '投标中',
          description: '城市核心区智能无人机起降台建设与运营',
          date: '2025-5-20',
          views: '256',
          comments: '18',
          price: '¥30万-50万'
        },
        {
          title: '山地旅游营地低空体验项目',
          image: 'https://feiwow.com:62/?explorer/share/file&hash=0fa6wUGr9yzFmvjOLWqWgZmcCwCiQeVKqqj3mn-s3IZ8v5OiBDM-pDCrEgEwVscQ8_l8',
          status: '投标中',
          description: '国家4A景区低空游览项目运营合作',
          date: '2025-3-15',
          views: '378',
          comments: '32',
          price: '¥80万-100万'
        },
        {
          title: '城郊航空充换电站网络建设',
          image: 'https://feiwow.com:62/?explorer/share/file&hash=fb36XJFa6wGpeFyO5S1mSnJf_wPjVJ20Q7CykOfhk5Nz4k5hGcdyxXEIJwhNWRqCTE4i',
          status: '公开中',
          description: '低空飞行区域性充电网络建设合作伙伴',
          date: '2025-2-18',
          views: '432',
          comments: '24',
          price: '¥120万-150万'
        }
      ],
      bannerList: [
        {
          image: 'https://feiwow.com:62/?explorer/share/file&hash=1453CPud5deyyu480eXMtDuIN17Lmxx928PLVJ9v0OKjjEc4XGtcJj-Xdq6k2itMOE_V',
          tag: '官方',
          title: '中空领航无人机执照培训'
        },
        {
          image: 'https://feiwow.com:62/?explorer/share/file&hash=b26c86SVEVy-KGbj3BVi7_DWIFV-0igfuTQsE2Zz-4AF36wDUyT_8YvsG80qsnA57pbB',
          tag: '广告',
          title: '极飞无人机全国招募代理'
        },
        {
          image: 'https://www-cdn.djiits.com/dps/2fdd51ebb105dbf01513831e6761f286.jpg',
          tag: '广告',
          title: '大疆新品发布MATRICE 4'
        }
      ]
    };
  },
  onLoad() {
    // 初始化视频播放器
  },
  onShow() {
    // 页面显示时，如果用户没有在交互，则恢复自动滚动
    // 移除无用的自动滚动逻辑
  },
  onReady() {
    // 移除无用的自动滚动逻辑
  },
  // 页面隐藏时暂停视频
  onHide() {
    if (this.isMainVideoPlaying) {
      const videoContext = uni.createVideoContext('main-video', this);
      if (videoContext) {
        videoContext.pause();
        this.isMainVideoPlaying = false;
      }
    }
    // 移除无用的自动滚动逻辑
  },
  // 页面卸载时暂停视频
  onUnload() {
    if (this.isMainVideoPlaying) {
      const videoContext = uni.createVideoContext('main-video', this);
      if (videoContext) {
        videoContext.pause();
        this.isMainVideoPlaying = false;
      }
    }
    // 移除无用的自动滚动逻辑
  },
  methods: {
    // 视频播放开始事件
    onVideoPlay() {
      this.isMainVideoPlaying = true;
      console.log('视频开始播放');
    },

    // 视频暂停事件
    onVideoPause() {
      this.isMainVideoPlaying = false;
      console.log('视频已暂停');
    },

    // 视频播放结束事件
    onVideoEnded() {
      this.isMainVideoPlaying = false;
      console.log('视频播放结束');
    },

    // 服务项触摸开始
    onServiceTouchStart(index) {
      this.activeTouchIndex = index;
    },

    // 服务项触摸结束
    onServiceTouchEnd(index) {
      setTimeout(() => {
        this.activeTouchIndex = -1;
      }, 100); // 短暂延时，让动画效果完成

      // 服务项的点击跳转逻辑
      console.log('点击了服务项：', this.serviceList[index].name);

      // 项目发布页面跳转
      if (index === 0) {
        // 项目发布
        uni.navigateTo({
          url: '/subPackages/publish/index'
        });
      } else if (index === 3) {
        // 平台入驻
        uni.navigateTo({
          url: '/subPackages/settlement/index'
        });
      } else {
        // 其他服务项的跳转逻辑
        // uni.navigateTo({
        //   url: `/pages/service/detail?id=${index}&name=${encodeURIComponent(this.serviceList[index].name)}`
        // });
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        });
      }
    },

    // 替换为tap事件处理
    onProjectTap(index) {
      // 设置激活效果
      this.activeProjectIndex = index;
      
      // 短暂延时后移除激活效果
      setTimeout(() => {
        this.activeProjectIndex = -1;
      }, 100);
      
      // 点击项目的逻辑
      console.log('点击了项目：', this.projectList[index].title);
      uni.navigateTo({
        url: '/subPackages/project-detail/index'
      });
    },

    // 轮播图变化
    onBannerChange(e) {
      this.currentBannerIndex = e.detail.current;
    }
  }
};
</script>

<style lang="scss">
/* 隐藏所有滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
  -webkit-appearance: none;
}

/* 让页面和容器支持隐藏滚动条但可滚动 */
page,
.container,
.scroll-view-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.container {
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 视频播放器样式 */
.video-player-container {
  width: 100%;
  height: 420rpx;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.main-video {
  width: 100%;
  height: 100%;
}

.video-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

/* SVG 图标已通过组件控制大小 */

/* 服务分类样式 */
.service-category {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.15s ease;
  z-index: 1;
}

/* 点击时的动画效果 */
.service-item-active {
  transform: scale(0.92);
}

.service-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  position: relative;
  overflow: hidden;
}

.service-icon:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.service-item-active .service-icon:after {
  animation: ripple 0.4s ease-out;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.service-icon .iconfont {
  font-size: 56rpx;
  color: #4161f6;
}

.service-name {
  font-size: 26rpx;
  color: #333;
  transition: color 0.2s ease;
}

.service-item-active .service-name {
  color: #1455ff;
}

/* 章节标题样式 */
.section {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8rpx;
  width: 8rpx;
  height: 32rpx;
  background-color: #1455ff;
}

.more {
  font-size: 24rpx;
  color: #999;
}

/* 热门机型样式 */
.aircraft-list {
  white-space: nowrap;
  padding: 0 30rpx;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* 在iOS上启用原生滚动减速 */
  scroll-snap-type: x mandatory; /* 使滚动对齐到元素 */
}

.aircraft-item {
  display: inline-block;
  width: 600rpx;
  margin-right: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center; /* 滚动对齐到中心 */
  transition: all 0.2s ease; /* 为交互添加平滑过渡 */
  will-change: transform; /* 优化性能 */
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 机型卡片触摸效果 */
.aircraft-item:active,
.aircraft-item[data-active='true'] {
  transform: scale(0.97);
  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.08);
}

.aircraft-img {
  width: 100%;
  height: 300rpx;
}

.aircraft-info {
  padding: 20rpx;
}

.aircraft-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.aircraft-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.aircraft-tag {
  display: inline-block;
  font-size: 22rpx;
  color: #fff;
  background-color: #1455ff;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
  margin-left: 15rpx;
}

.aircraft-detail {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.view-btn {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 图标已通过组件控制大小 */

/* 低空资讯样式 */
.news-list {
  padding: 0 30rpx;
}

.news-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
  transition: transform 0.2s ease, background-color 0.3s ease;
  position: relative;
  z-index: 1;
  border-radius: 10rpx;
  overflow: hidden;
}

.news-item-active {
  transform: translateY(2rpx) scale(0.99);
  background-color: rgba(240, 240, 240, 0.5);
}

.news-item:last-child {
  border-bottom: none;
}

.news-img {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
  position: relative;
  overflow: hidden;
}

.news-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.news-item-active .news-img::after {
  opacity: 1;
  animation: news-image-pulse 0.4s ease-out;
}

@keyframes news-image-pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

.news-info {
  display: flex;
  flex-direction: column;
}

.news-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 15rpx;
  transition: color 0.2s ease;
}

.news-item-active .news-title {
  color: #1455ff;
}

.news-meta {
  font-size: 22rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.news-source,
.news-views {
  margin-left: 20rpx;
}

/* 广告banner样式 */
.ad-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.swiper {
  width: 100%;
  height: 240rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20rpx;
}

.banner-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 24rpx;
  padding: 8rpx 15rpx;
  border-radius: 6rpx;
  z-index: 1;
}

.banner-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70rpx;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 1;
}

.banner-title {
  font-size: 28rpx;
  color: #fff; /* 白色文字 */
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5); /* 文字阴影 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banner-indicators {
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rpx;
  z-index: 1;
}

.indicator {
  width: 20rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.indicator-active {
  width: 28rpx;
  background-color: #fff;
}

/* 热门项目样式 */
.project-list {
  padding: 0 30rpx;
}

.project-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
  transition: transform 0.2s ease, background-color 0.3s ease;
  position: relative;
  z-index: 1;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.project-item-active {
  transform: translateY(2rpx) scale(0.99);
  background-color: rgba(240, 240, 240, 0.5);
}

.project-item:last-child {
  border-bottom: none;
}

.project-img {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
  position: relative;
}

.project-status {
  position: absolute;
  top: 20rpx;
  right: 0rpx;
  padding: 6rpx 15rpx;
  background-color: #edf6ff;
  border-radius: 6rpx;
  font-size: 24rpx;
  color: #1455ff;
}

.project-info {
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
}

.project-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.project-item-active .project-title {
  color: #1455ff;
}

.project-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.project-date {
  display: flex;
  align-items: center;
}

.project-date:before {
  content: '\e6bb'; /* 使用日历图标的 unicode */
  font-family: 'iconfont';
  margin-right: 6rpx;
  font-size: 24rpx;
}

.project-stats {
  display: flex;
}

.project-views {
  margin-right: 20rpx;
  display: flex;
  align-items: center;
}

.project-views:before {
  content: '\e65e'; /* 使用眼睛图标的 unicode */
  font-family: 'iconfont';
  margin-right: 6rpx;
  font-size: 24rpx;
}

.project-comments {
  display: flex;
  align-items: center;
}

.project-comments:before {
  content: '\e665'; /* 使用评论图标的 unicode */
  font-family: 'iconfont';
  margin-right: 6rpx;
  font-size: 24rpx;
}

.project-price {
  font-size: 26rpx;
  color: #ff6b00;
  font-weight: 500;
}
</style>
